<script setup>
import { User, Unlock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";

const form = ref({
  username: "admin",
  password: "admin"
});

const FromRef = ref(null);

const rules = reactive({
  username: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 12, message: "长度在 3 - 12", trigger: "blur" }
  ]
});

import { login, getinfo } from "@/api/manager.js";
import { addcookies } from "@/utils/cookies.js";
import { useRouter } from "vue-router";
import { toast } from "@/utils/toast.js";
import { useStore } from "vuex"
const store = useStore()
const router = useRouter();
let isLoading = ref(false);

const OnSubmit = () => {
  FromRef.value.validate(isValid => {
    if (isValid) {
      isLoading.value = true;

      login(form.value.username, form.value.password)
        .then(result => {
          toast(
            "登录成功",
            "欢迎来到智慧商城后台管理系统",
            true,
            "success",
            true
          );
          addcookies("user-token", result.token);

          store.dispatch('actionsSetuserinfo')

          // getinfo()
          //   .then(result => {
          //     store.commit('setuserinfo',result)
          //     console.log(result);
          //   })
          //   .catch(err => {
              
          //   });

          router.push("/");
        })

        .catch(err => {
          toast(err.response.data.msg, "", "", "error");
          console.log(err);
        })
        .finally(() => {
          isLoading.value = false;
        });
    } else {
      
    }
  });

// onMounted(()=>{
//   document.addEventListener('keydown',OnSubmit)
// })

// onbeforemount(()=>{
//   document.removeEventListener('keydown',OnSubmit)
// })


};
</script>

<template>
  <el-row class="box">
    <el-col :span="16" class="hello">
      <div class="h1">
        <p>欢迎光临</p>
      </div>
    </el-col>
    <el-col :span="8" class="login">
      <el-card class="logintop">
        <template #header>
          <div class="card-header">
            <h2>欢迎回来</h2>
            <p>账号密码登录</p>
          </div>
        </template>
        <el-form
          :model="form"
          :rules="rules"
          :inline="false"
          size="normal"
          class="elForm"
          ref="FromRef"
        >
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" :prefix-icon="User" :rules="rules" placeholder="请输入账号"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" :prefix-icon="Unlock" :rules="rules" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item class="dl">
            <el-button type="primary" @click="OnSubmit" :loading="isLoading">登录</el-button>
            <el-button>注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.box {
  min-width: 100vw;
  min-height: 100vh;
  background-image: url(https://images3.alphacoders.com/955/95535.jpg);
}
.box .hello {
  /* text-align: center;
    margin-top: 30%; */
  height: 100vh;
  width: 100vw;
  @apply flex justify-center items-center;
}
.hello .h1 {
  @apply text-4xl font-600 text-light-50 text-shadow-lg;
}
.hello p {
  color: rgba(255, 255, 255, 0.3);
}
.box .login {
  height: 100vh;
  width: 100vw;
  @apply flex justify-center items-center;
}
.login .logintop {
  height: 300px;
  width: 420px;
}
.card-header h2 {
  @apply text-2xl font-600 text-shadow-lg flex justify-center items-center;
}
.card-header p {
  @apply text-sm font-400 text-shadow-lg flex justify-center items-center mt-2;
}
.login .logintop .elForm .dl {
  margin-left: 35%;
}
</style>